<template>图片上传组件待完善</template>
<!-- <template>
	<view class="upload-warp">
 <view class="pre-box">
          <view class="pre-item" v-for="(item, index) in fileList" :key="index" :style="{ width: `${width}rpx`, height: `${height}rpx` }">
            <image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
            <view class="delete-icon" @click.stop="handleRemove" v-if="!disabled">
              <u-icon name="close" color="#fff" size="20"></u-icon>
            </view>
          </view>
          <u-upload
            ref="uploadRef"
            :width="width"
            :height="height"
            :action="action"
            :max-count="limit"
            :header="headers"
            :multiple="false"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :disabled="disabled"
            @on-success="onSuccess"
            @on-remove="onRemove"
          >
          </u-upload>
        </view>
	</view>
</template>

<script setup lang="ts" name="hxUpload">
import { ref, watch } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { Local } from '@/utils/storage';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: [String, Array],
	width: {
		type: String,
		default: '100px',
	},
	height: {
		type: String,
		default: '100px',
	},
	limit: {
		type: Number,
		default: 1,
	},
});
interface FileItem {
	url: string;
	error?: boolean;
	progress?: number;
}

const fileList = ref<FileItem[]>([]);
const number = ref(0);
const uploadList = ref<FileItem[]>([]);
const uploadRef = ref();

const action = ref(import.meta.env.VITE_API_URL + '/upms/file/app/upload');
const headers = ref({
	satoken: Local.getToken(),
});

const onSuccess = (data: any, index, lists, name) => {
	const rsFill: { url: string } = { url: data.data };
	uploadList.value.push(rsFill);
	uploadedSuccessHandle();
};
const uploadedSuccessHandle = () => {
	if (number.value > 0 && uploadList.value.length == number.value) {
		fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
		uploadList.value = [];
		number.value = 0;
		emit('update:modelValue', fileList.value.map((item) => item.url).join(','));
	}
};
const beforeUpload = ({ files, resolve }) => {
	number.value++;
	resolve(true);
};
const handleRemove = ({ file }) => {
	uploadList.value = uploadList.value.filter((v) => v.url != file.url);
	const urlList = uploadList.value.map((item: FileItem) => item.url);
	emit('update:modelValue', props.limit > 1 ? urlList : urlList[0]);
};
onReady(() => {
	uploadRef.value.clear();
});
// 监听imageUrl
watch(
	() => props.modelValue,
	(val) => {
		if (val) {
			let temp = 1;
			const list: any = Array.isArray(val) ? val : props?.modelValue?.split(',');
			fileList.value = list.map((item: any) => {
				if (typeof item === 'string') {
					item = { url: item, error: false, progress: 100 };
				}
				return item;
			});
		} else {
			fileList.value = [];
			return [];
		}
	},
	{ deep: true, immediate: true }
);
const beforeUpload = (index: number, list: any) => {
	const file = list[index];
	if (file.type! == 'image/jpeg') {
		return false;
	}
	number.value++;
	return true;
};
</script>

<style lang="scss">
.upload-warp {
	padding: 24rpx;
	.slot-btn {
		width: 140rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
}
</style> -->
